<script lang="ts" setup>
import {message} from 'ant-design-vue'
</script>

<template>
    <div class="footer">
        <div wfull flexc>
            <div w-1200px class="grid-three" mt-10px>
                <cdn-img src="/images/logo.png" wfull hfull/>
                <div text-16px color="#4f555d" flexc flex-col font-normal class="footer-href">
                    <div mb-10px>
                        <a @click="message.warn('敬请期待')" mr-29px>网站地图</a>
                        <a @click="message.warn('敬请期待')" mr-29px>每日福利</a>
                        <!-- <a href="#" mr-29px>联系讲师</a> -->
                        <a @click="message.warn('敬请期待')" mr-29px>APP下载</a>
                    </div>
                    <div flexc>
                        友情链接：
                        <a target="__blank" href="https://xiaodijy.tmall.com/">小滴天猫旗舰店&nbsp;&nbsp;</a>|&nbsp;&nbsp;
                        <a target="__blank" href="https://open1024.com/">Open1024技术导航站&nbsp;&nbsp;</a>|&nbsp;&nbsp;
                        <a target="__blank"
                           href="https://www.aliyun.com/minisite/goods?taskPkg=amb618all&pkgSid=356821&recordId=3651796&userCode=r5saexap">
                            阿里云&nbsp;&nbsp;
                        </a>
                        |&nbsp;&nbsp;
                        <a target="__blank" href="https://xdclass.ke.qq.com/">腾讯课堂</a>
                    </div>
                </div>
                <div flex class="footer-qr">
                    <cdn-img src="/images/xdclass_gzh.png" class="w80px! h80px" mr-16px/>
                    <div flex justify-center flex-col text-18px font-light text="#4f555d">
                        <p>扫码关注</p>
                        <p>微信服务号</p>
                    </div>
                </div>
            </div>
        </div>
        <a-divider/>
        <div class="copyright">
            Copyright © 2018 Company,lnc.
            <a href="https://www.beian.gov.cn/"> &nbsp;粤ICP备15092968号&nbsp; </a>
            Terms
        </div>
    </div>
</template>

<style lang="less" scoped>
.footer {
    background-color: #fbfbfb;

    .footer-href a:hover {
        color: #f38e48;
    }

    :deep(.ant-divider-horizontal) {
        margin: 5px 0;
    }

    .grid-three {
        display: flex;
        align-items: center;
        justify-content: space-between;

        img {
            width: 163px;
            height: 80px;
            flex-shrink: 0;
        }

        .footer-href {
            flex-shrink: 0;
        }

        .footer-qr {
            flex-shrink: 0;
        }
    }

    .copyright {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        flex-basis: 1200px;
        font-size: 12px;
        color: #7f7f7f;
        padding-bottom: 10px;

        a {
            color: #7f7f7f;

            &:hover {
                color: #f38e48;
            }
        }
    }
}
</style>